<template>
    <div>        
        <Navbar/>
        <Tabbar/>
    </div>
</template>

<script>
import Navbar from './Navbar.vue'
import Tabbar from './Tabbar.vue'
export default {
    data(){
        return{
            navTitle:'首页'
        }
    },
    // provide 跨级通信
    // 1. 父组件中使用provide来提供变量，然后在子组件中通过inject来注入变量。
    // 2. provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。
   //下面代码向外暴露了navTitle,在需要用的组件中通过inject来注入变量,在Navbar和Tabbar中都可使用
    provide(){
        return{
            navTitle:this.navTitle,
            // 为了响应数据的变化，我们还需要将这个属性变为可监听的
            // app:this,这里的app也可以写成abc,随意
            app:this
        }
    },
   
    components:{
        Navbar,
        Tabbar
    }
}
</script>





<style>
*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}


</style>

